<template>
  <main>{{ one }}</main>
  <div class="scss-color">{{ userInfo.name }}</div>
  <div>{{ userInfo.total }}</div>
  <div>{{ todo.todoData }}</div>
  <div>{{ todo.total }}</div>
  <el-button type="primary" @click="changeName" :icon="Plus">点击修改名称</el-button>
  <el-pagination
    :page-sizes="[100, 200, 300, 400]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
  />
  <svg-icon icon="dog"></svg-icon>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'
import userInfoStore from '../stores/modules/userInfoStore'
import todoStore from '../stores/modules/todo'
const one = ref('测试')
const userInfo = userInfoStore()
const todo = todoStore()
const changeName = () => {
  // 调用仓库方法修改仓库值
  userInfo.updateName('修改的名称')
  todo.changeData()
}
</script>

<style lang="scss" scoped>
.scss-color {
  color: $color;
}
</style>
